<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>public/css/bootstrap-datetimepicker.min.css" />
<style>
    .img-responsive:hover + #event-img-hover-text{
        text-wrap:normal;
        position: absolute;
        left: 3px;
        top: 46px;
        height: 20px;
        display: inline;
        height: 20px;
    }
    #event-img-hover-text p{
        width:10em;
        text-align: center;

    }
    #event-img-hover-text{
        text-wrap:normal;
        position: absolute;
        left: 3px;
        top: 46px;
        height: 20px;
        display: none;
        height: 20px;
    }

</style>

<script src="<?php echo base_url(); ?>public/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery.validate.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery-validate.bootstrap-tooltip.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        //datetime picker
        currentTime = new Date().toLocaleTimeString();
        var dt = new Date();
        currentDay = dt.getDate()+ "-" + (dt.getMonth() + 1) + "-" + dt.getFullYear();
        $("#start_time").val(currentDay +" "+currentTime);
        $('#datetimepicker2').datetimepicker({
            language: 'en',
            format: 'dd-MM-yyyy hh:mm:ss',
            pick12HourFormat: true
        });
        
        //placeholder manual for desciption area
        $isPress = false;
        $("#textarea_description").focus(function(){
            $(this).val('');
        });
        $("#textarea_description").keydown(function(){
            $isPress = true;
        });
        $("#textarea_description").blur(function(){
            if($isPress == false)
                $(this).val('Yêu cầu của bạn hay bất cứ thông tin nào cần thiết');
        });
        //end placeholder manual for desciption area
        
        //set value for duration
        $("#duration_time").blur(function(){
            number = $(this).val();
            time = $("#duration_option").val();
            $("#duration").val(number+time);
        });
        $("#duration_option").change(function(){
            number = $("#duration_time").val();
            time = $(this).val();
            $("#duration").val(number+time);
        });
        //end placeholder manual for desciption area
        
        
        
        //validate form
            $("#frm-event").validate({    
            // Specify the validation rules
            rules: {
                event_name: {required:true, 
                   minlength: 10    
                },
                place: "required",
                duration_time: {
                    required: true,
                    number: true
                }
                    
//                email: {
//                    required: true,
//                    email: true
//                },
//                password: {
//                    required: true,
//                    minlength: 5
//                },
//                agree: "required"
            },
        
            // Specify the validation error messages
            messages: {
                event_name: "Tên sự kiện phải lớn hơn 10 kí tự",
                place: "Vui lòng nhập địa điểm",
                duration_time: "Vui lòng nhập số"
               
//                email: "Please enter a valid email address",
//                agree: "Please accept our policy"
            },
        
            tooltip_options: {
                event_name: {trigger:'focus'},
                place: {trigger:'focus'}
            },
            submitHandler: function(form) {
                url="<?php echo base_url().'/index.php/event/create_process'; ?>";
                sex =$("#sex").val();
                age_range =$("#age_range").val();

                event_name =$("#event_name").val();
                des =$("#textarea_description").val();
                start_time =$("#start_time").val();
                duration =$("#duration").val();
                place =$("#place").val();
                data ={"title": event_name, 
                    "description": des,
                    "place": place,
                    "start_time": start_time,
                    "duration": duration,
                    "sex": duration,
                    "age_range": age_range
                };
                $.post( url, data, function(resp) {
                     alert(resp.rs);
                }, "json");
            }
        });
        //end validate form                
    });
</script>
<div id="space" style="height: 50px;"></div>         
<div class="container theme-showcase" role="main">
<div class="span12" style="margin-top: 30px;">
    <!--For input event-->
    <div class="span2">
        <div class="accordion" id="leftMenu">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#">
                        <i class="icon-home"></i> Quản lý chung
                    </a>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
                        <i class="icon-th"></i> Sự kiện
                    </a>
                </div>
                <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree">
                        <i class="icon-th-list"></i> Cá nhân
                    </a>
                </div>
                <div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>                 
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFour">
                        <i class="icon-list-alt"></i> Nhật kí
                    </a>
                </div>
                <div id="collapseFour" class="accordion-body collapse" style="height: 0px; ">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>                 
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFive">
                        <i class="icon-cog"></i> Album
                    </a>
                </div>
                <div id="collapseFive" class="accordion-body collapse" style="height: 0px; ">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>                 
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="span8" style="">
        <!--        class="form-horizontal"-->
        <form  id="frm-event" type="actionForm" method="POST" action="#" novalidate="novalidate">
            <div class="control-group">
                <label class="control-label" for="selectbasic">Bạn cần một bạn là</label>
                <div class="controls">
                    <select id="sex" name="sex" class="input-xlarge">
                        <option value="-1">Sao cũng được</option>
                        <option value="1">Nam</option>
                        <option value="0">Nữ</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="selectbasic">Độ tuổi</label>
                <div class="controls">
                    <select id="age_range" name="age_range" class="input-xlarge ">
                        <option value="18-25">18-25</option>
                        <option value="26-35">26-35</option>
                        <option value="36-40">35-40</option>
                        <option value=">40">>40</option>
                        <option value="18"><18</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputPassword">Cùng tham gia</label>
                <div class="controls">
                    <input class="span6" name="event_name" type="text" id="event_name" placeholder="Tên sự kiện của bạn: đi coi phim, đi cà phê, đi công viên, blabla.." >
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="textarea">Mô tả thêm</label>
                <div class="controls">                     
                    <textarea id="textarea_description" name="des" class="span6" rows="4">Yêu cầu của bạn hay bất cứ thông tin nào cần thiết
                    </textarea>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="textarea">Thời gian</label>
                <div id="datetimepicker2" class="controls">
                    <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" name="start_time" id="start_time"></input>
                    <span class="add-on">
                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                    </span>
                    <!--                    <label class="control-label" for="textarea">Kéo dài trong</label>-->
                    <!--                    <input type="text"></input>-->

                </div>

            </div>
            <div class="control-group">
                <label class="control-label" for="textarea">Kéo dài trong</label>
                <div id="datetimepicker2" class="controls">
                    <input type="number" name="duration_time" id="duration_time" placeholder="1" value="1"></input>
                    <select id="duration_option" name="duration_option" class="">
                        <option value="h">Giờ</option>
                        <option value="n">Ngày</option>
                    </select>
                </div>
                <input type="hidden" value="1h" name="duration" id="duration"></input>
            </div>


            <div class="control-group">
                <label class="control-label" for="inputPassword">Địa điểm</label>
                <div class="controls">
                    <input class="span6" id="place" name="place" type="text" placeholder="Lotte 10 CMT8,Quận 10,Hồ Chí Minh">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputPassword">Hình đại diện của sự kiện</label>
                <div class="controls" style="position: relative;">
                    <img class="img-responsive" data-toggle="modal" data-target="#myModal" src="<?php echo base_url(); ?>/public/img/event_default.jpg" alt="" />
                    <span id="event-img-hover-text" ><p>Click để upload hình đại diện</p></span>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="btn-lg" name="btn-lg"  style="width: 105px;float: left; background: #20B2AA;">Tạo</button>
                    <button class="btn btn-primary btn-lg btn-block" id="btn-rg" name="btn-rg" type="button" style="width: 105px;float: left;margin-left: 10px;margin-top: 0px;background: #808080;">Lưu nháp</button>
                </div>
            </div>

        </form>
    </div>

</div>




<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Upload hình đại diện cho sự kiện</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div></div>